<template>
  <div>
    <MyHeader
      :title="title"
      :backgroundColor="backgroundColor"
      :color="color"
    />
    <div class="main">
      <MyGoods v-for="item in list" :key="item.id" :list="item"></MyGoods>
    </div>

    <MyFooter :list="list" />
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyFooter from "./components/MyFooter";
import MyGoods from "./components/MyGoods";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },
  data() {
    return {
      title: "购物车案例",
      backgroundColor: "#0f0",
      color: "#f00",
    };
  },
  computed: {
    // 映射vuex的state中的list数组
    // ...mapState(["list"]),
    // 模块化写法
    ...mapState({
      list: (state) => state.ShopcarModule.list,
    }),
  },
  methods: {
    // 映射异步actions发送请求函数
    ...mapActions("ShopcarModule", ["asyncGoodsList"]),
  },
  created() {
    // 初始化后调用actions发送请求获取数据
    this.asyncGoodsList();
  },
};
</script>

<style scoped>
.main {
  padding: 50px;
}
</style>